//Global Variables

//onload function
$(function(){
	//alert("sensi_util.js is loaded");
	init(3,3);
});

function init(m,n)
{
	clearGrid();
	creatGrid(m,n);
	alignBox(m,n);
}

function creatGrid(m,n)
{
	//alert("inside grid");
	for(i=0;i<m;i++)
	{
		$("div#front").append("<div id=r_"+i+"></div>");
		var row_handle = "div#r_"+i
		//alert(row_handle);
		for(j=0;j<n;j++)
		{
			var col_handle = i*10+j;
			//alert(col_handle);
			$(row_handle).append("<span id=b_"+col_handle+" class='box'></span>");
			$(".box").html("Box").click(function(){this.innerHTML=this.id});
		}
	}
}

function clearGrid()
{
	$("div#front").html("");
}

function alignBox(m,n)
{
	var handle = "span#b_1";
	var x = 5;
	var y = 7;
	var attrib = "position:absolute;top:"+x+"em;left:"+y+"em;";
	//alert(attrib);
	$(handle).click(function(){alert("Hello!")});
}
